<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>完整示例 - Editor.md examples</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="../dist/css/editormd.css" />        
    </head>
    <body>
        <div id="layout">
            <header>
                <h1>完整示例</h1>
                <p>开启HTML标签识别和解析、TeX(基于KaTeX)、流程图和时序/序列图支持;</p>            
            </header>
            <div class="btns">
                <button id="show-btn">显示编辑器</button>
                <button id="hide-btn">隐藏编辑器</button>
                <button id="get-md-btn">获取Markdown(源码)</button>
                <button id="get-html-btn">获取HTML(源码)</button>
                <button id="watch-btn">开启实时预览</button>
                <button id="unwatch-btn">关闭实时预览</button>
                <button id="preview-btn">预览HTML(按ESC取消)</button>
                <button id="fullscreen-btn">全屏(按ESC取消)</button>
                <button id="show-toolbar-btn">显示工具栏</button>
                <button id="close-toolbar-btn">关闭工具栏</button>
            </div>
            <div id="test-editormd"></div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="../src/js/editormd.js"></script>   
        <script type="text/javascript">
            var testEditor;
            
            $(function() {
                
                $.get('test.md', function(md){
                    testEditor = editormd("test-editormd", {
                        width: "90%",
                        height: 740,
                        path : '../lib/',
                        markdown : md,
                        saveHTMLToTextarea : true,    // 保存HTML到Textarea
                        //watch : false,                // 关闭实时预览
                        htmlDecode : true,            // 开启HTML标签解析，为了安全性，默认不开启    
                        //toolbar  : false,             //关闭工具栏
                        //previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
                        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                        flowChart : true,             // 开启流程图支持，默认关闭
                        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                        imageUpload : true,
                        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL : "./php/upload.php",
                        onload : function() {
                            console.log('onload', this);
                            //this.fullscreen();
                            //this.unwatch();
                            //this.watch().fullscreen();

                            //this.setMarkdown("#PHP");
                            //this.width("100%");
                            //this.height(480);
                            //this.resize("100%", 640);
                        }
                    });
                });
                
                $("#show-btn").bind('click', function(){
                    testEditor.show();
                });
                
                $("#hide-btn").bind('click', function(){
                    testEditor.hide();
                });
                
                $("#get-md-btn").bind('click', function(){
                    alert(testEditor.getMarkdown());
                });
                
                $("#get-html-btn").bind('click', function() {
                    alert(testEditor.getHTML());
                });                
                
                $("#watch-btn").bind('click', function() {
                    testEditor.watch();
                });                 
                
                $("#unwatch-btn").bind('click', function() {
                    testEditor.unwatch();
                });              
                
                $("#preview-btn").bind('click', function() {
                    testEditor.previewing();
                });
                
                $("#fullscreen-btn").bind('click', function() {
                    testEditor.fullscreen();
                });
                
                $("#show-toolbar-btn").bind('click', function() {
                    testEditor.showToolbar();
                });
                
                $("#close-toolbar-btn").bind('click', function() {
                    testEditor.hideToolbar();
                });
            });
           /* 
            // IE不支持
            editormd.printAreaCount = 0;
            editormd.printArea      = function($obj) {
                var prefix   = "editormd-print-area-iframe";
                var iframeId = prefix + editormd.printAreaCount;
                
                if (editormd.printAreaCount > 0) 
                {
                    document.body.removeChild(document.getElementById(iframeId));
                }
                
                editormd.printAreaCount++;
                                
                var iframe = document.createElement("iframe");
                iframe.id  = prefix + editormd.printAreaCount;
                iframe.style.cssText = "position:absolute;width:0px;height:0px;top:-999px;left:-999px;";
                
                document.body.appendChild(iframe);
                
                var iframeDocument = iframe.contentWindow.document;
                var links          = document.getElementsByTagName("link");
                
                for (var i = 0, len = links.length; i < len; i++) 
                {
                    var rel = links[i].getAttribute("rel").toLowerCase();
                    
                    if (rel === "stylesheet")
                    {
                        var css = "<link type=\"text/css\" rel=\"stylesheet\" href=\"" + links[i].getAttribute("href") + "\" >";
                        iframeDocument.write(css);
                    }
                }
                
                iframeDocument.write("<div class=\"" + $obj.className + "\">" + $obj.innerHTML + "</div>");
                iframeDocument.close();

                var iframeWindow = iframe.contentWindow;
                iframeWindow.close();
                iframeWindow.focus();
                iframeWindow.print();
            };
            
            function preview() {
                editormd.printArea(testEditor.previewContainer[0]);
            }*/
        </script>
    </body>
</html>